<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
	layout:decorator="option/base_page">
<head>
	<meta charset="UTF-8" />
	
	<title>无线微功耗气体检测报警系统</title>
	<link rel="stylesheet" th:href="@{/lib/bootstrap-table/bootstrap-table.min.css}">
	<link rel="stylesheet" th:href="@{/lib/bootstrapvalidator/css/bootstrapValidator.css}">
	
	<script th:src="@{/lib/bootstrap-table/bootstrap-table.min.js}"></script>
	<script th:src="@{/lib/bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>
	<script th:src="@{/lib/bootstrapvalidator/js/bootstrapValidator.js}"></script>
	<script th:src="@{/lib/ajaxfileupload.js}"></script>
</head>
<body layout:fragment="option-main">
	<h3>安防物资管理</h3>
	<div id="asset-register-table-toolbar">
		<div class="pull-left col-lg-3 input-group">
		      <input type="text" class="form-control" id="inputkeyword" placeholder="请输入关键字">
		      <span class="input-group-btn">
		        <button id="search-button" class="btn btn-default" type="button" >查询</button>
		      </span>
		 </div>
		<!-- <button id="option-asset-add-button" class="btn btn-default" type="button" data-toggle="modal"  data-target="#assetModal">新增</button>
		<button id="option-asset-up-button" class="btn btn-default" type="button" onclick= "initFile()">上传EXCEL</button>
		<input type="file" id="assetFileUpload" name="file" multiple="multiple" onchange="assetUpload()" style="display: none"> -->
		<div class="pull-right">
			<button id="option-asset-down-button" class="btn btn-default" type="button" onclick= "assetDownLoad()">下载EXCEL</button>
		</div>
	</div>
	<table id="option-asset-table" data-toolbar="#asset-register-table-toolbar"></table>
	<script th:inline="javascript">
		function initFile(){
			$('#assetFileUpload').val('');
			$('#assetFileUpload').click();
		}
		function assetDownLoad(){
			var params = {
				searchContent: $("#inputkeyword").val(),//按条件搜索
			};
			window.open("/option/asset/downLoadAssetEXL?param="+encodeURI(JSON.stringify(params)));
		}
		function assetUpload(){
		    $.ajaxFileUpload({  
				type:"POST",
                url : "/option/asset/assetFileUpload",  
                fileElementId : "assetFileUpload",// 文件上传表单的id <input type="file" id="fileUpload" name="file" />  
                success : function(data){ // 服务器成功响应处理函数 
        	    	alert(data.body.textContent);
        			queryTableData();
                },  
                error : function(data){// 服务器响应失败处理函数  
        	    	alert("error");
                }  
	   		 });  

		};
		$(document).ready(function(){
			$(window).resize(function() {
			    $('#option-asset-table').bootstrapTable('resetView', {
			        height: $(window).height() - 100
			    });
			});
			//查询
			$("#search-button").click(function () {
		        $('#option-asset-table').bootstrapTable(('refresh')); // 很重要的一步，刷新url！
		    });
			$('#assetForm').bootstrapValidator({
　　　　　　　　message: 'This value is not valid',
            　		  feedbackIcons: {
                　　　　　　　　valid: 'glyphicon glyphicon-ok',
                　　　　　　　　invalid: 'glyphicon glyphicon-remove',
                　　　　　　　　validating: 'glyphicon glyphicon-refresh'
            　　　　　 },
	            fields: {
	            	smName: {
	                    validators: {
	                        notEmpty: {
	                            message: '名称不能为空'
	                        },
	                        stringLength: {/*长度提示*/
	                            min: 1,
	                            max: 30,
	                            message: '名称长度必须在1到100之间'
	                        }
	                    }
	                },
	                smNum: {
	                    validators: {
	                        notEmpty: {
	                            message: '数量不能为空'
	                        },
	                        regexp: {/* 只需加此键值对，包含正则表达式，和提示 */
	                            regexp: /^\d+$/,
	                            message: '数量只能是数字'
	                        },
	                        stringLength: {/*长度提示*/
	                            min: 1,
	                            max: 11,
	                            message: '数量长度必须在1到11之间'
	                        }
	                    }
	                },
	                smNormalNum: {
	                    validators: {
	                        notEmpty: {
	                            message: '正常数量不能为空'
	                        },
	                        regexp: {/* 只需加此键值对，包含正则表达式，和提示 */
	                            regexp: /^\d+$/,
	                            message: '正常数量只能是数字'
	                        },
	                        stringLength: {/*长度提示*/
	                            min: 1,
	                            max: 11,
	                            message: '正常数量长度必须在1到11之间'
	                        }
	                    }
	                },
	                smAbnormalNum: {
	                    validators: {
	                        notEmpty: {
	                            message: '异常数量不能为空'
	                        },
	                        regexp: {/* 只需加此键值对，包含正则表达式，和提示 */
	                            regexp: /^\d+$/,
	                            message: '异常数量只能是数字'
	                        },
	                        stringLength: {/*长度提示*/
	                            min: 1,
	                            max: 11,
	                            message: '异常数量长度必须在1到11之间'
	                        }
	                    }
	                },
	                smExpireNum: {
	                    validators: {
	                        notEmpty: {
	                            message: '到期数量不能为空'
	                        },
	                        regexp: {/* 只需加此键值对，包含正则表达式，和提示 */
	                            regexp: /^\d+$/,
	                            message: '到期数量只能是数字'
	                        },
	                        stringLength: {/*长度提示*/
	                            min: 1,
	                            max: 11,
	                            message: '到期数量长度必须在1到11之间'
	                        }
	                    }
	                },
	                smUnexpiredNum: {
	                    validators: {
	                        notEmpty: {
	                            message: '未到期数量不能为空'
	                        },
	                        regexp: {/* 只需加此键值对，包含正则表达式，和提示 */
	                            regexp: /^\d+$/,
	                            message: '未到期数量只能是数字'
	                        },
	                        stringLength: {/*长度提示*/
	                            min: 1,
	                            max: 11,
	                            message: '未到期数量长度必须在1到11之间'
	                        }
	                    }
	                },
	                
	            }
	        });
			$('body').on('hidden.bs.modal', '.modal', function () {//监听model关闭
			    //$(this).removeData('bs.modal');
			    $("input[name='oid']").val("");
				$("input[name='smName']").val("");
				$("input[name='smNum']").val("");
				$("input[name='smNormalNum']").val("");
				$("input[name='smAbnormalNum']").val("");
				$("input[name='smExpireNum']").val("");
				$("input[name='smUnexpiredNum']").val("");
				queryTableData();
			});
			$('#closeButton').click(function() {
		        $('#assetForm').data('bootstrapValidator').resetForm(true);
		    });
			$('#option-asset-table').bootstrapTable({
				height: $(window).height() - 100,
				url : "/option/asset/list",
				method: 'get',
				pagination : true,
				pageNumber : 1, //初始化加载第一页
				pageSize : 10,//单页记录数
				pageList : [10, 20, 50,100],
				sidePagination : 'server',
				queryParamsType:'',
				queryParams : function(params) {
					return {
                        pageSize : params.pageSize,
                        pageNumber : params.pageNumber,
                        searchContent: $("#inputkeyword").val(),//按条件搜索	
					};
				},
				dataType : "json",
				uniqueId : "oid", // 每一行的唯一标识，一般为主键列
				cardView : false, // 是否显示详细视图
				detailView : false, // 是否显示父子表
				resizable : false,
				search : false,
				showRefresh : false,
				showToggle : false,
				showColumns : false,
				//toolbar: '#toolbar',    //工具按钮用哪个容器
				cache: false, 
				columns:[
					{
	                    field:"oid",
	                    title:"oid",
	                    visible: false

	                },
					{
						title : '序号',
						field : 'id',
						align : 'center',
						valign : 'center',
						width : 100,
						formatter : function(value, row, index) {
							return index + 1;
						}
			 
					},
					{
						title : '名称',
						field : 'smName',
						align : 'center',
						valign : 'center',
						width : 200
			 
					},
					{
						title : '数量',
						field : 'smNum',
						align : 'center',
						valign : 'center',
						width : 150
					},
					{
						title : '正常数量',
						field : 'smNormalNum',
						align : 'center',
						valign : 'center',
						width : 150
					},
					{
						title : '异常数量',
						field : 'smAbnormalNum',
						align : 'center',
						valign : 'center',
						width : 150
					},
					{
						title : '到期数量',
						field : 'smExpireNum',
						align : 'center',
						valign : 'center',
						width : 150
					},
					{
						title : '未到期数量',
						field : 'smUnexpiredNum',
						align : 'center',
						valign : 'center',
						width : 150
					},
					/* {
						field : 'operate',
						title : '操作',
						align : 'center',
						width : 200,
						valign : 'center',
						formatter:function(value, row, index) {
						    return [
						        "<a name='option-asset-table-modfiy' onclick=\"getAssetModelData('" + row.oid + "')\">修改</a>",
						        "<a name='option-asset-table-delete' onclick=\"assetDeleteById('" + row.oid + "')\" >删除</a>"
						    ].join('');
						}
					} */
				]
			});
			$('#option-asset-table').bootstrapTable('hideLoading');
		});

		//刷新table
		function queryTableData() {
		   // 不带参数，只刷新（重新加载数据）
		   $("#option-asset-table").bootstrapTable('refresh');
		}
		
		//给Model获取值
		function getAssetModelData(id) {
		    $.ajax({
		        type : 'post',
		        url : '/option/asset/qryById/'+id,
		        dataType:'json',
		        success : function(result) {
		        	$("input[name='oid']").val(result.oid);
					$("input[name='smName']").val(result.smName);
					$("input[name='smNum']").val(result.smNum);
					$("input[name='smNormalNum']").val(result.smNormalNum);
					$("input[name='smAbnormalNum']").val(result.smAbnormalNum);
					$("input[name='smExpireNum']").val(result.smExpireNum);
					$("input[name='smUnexpiredNum']").val(result.smUnexpiredNum);
					$('#assetModal').modal('show');
		        }
		    })
		};
		
		//保存
		function assetSaveFn(){
			var bootstrapValidator = $("#assetForm").data("bootstrapValidator");
			bootstrapValidator.validate();
			if(bootstrapValidator.isValid()){
				var data = {};
			    var dataArray = $('#assetForm').serializeArray();
			    if(dataArray.length>0){
			        for(i=0;i<dataArray.length;i++){
			            var input = dataArray[i];
			            var ele = $("input[name='"+input.name+"']");
			            if(ele.prop("disabled")!=true){
			                data[input.name] = input.value;
			            }
			        }
			    }
			    if(parseInt(data.smNum)!=parseInt(data.smNormalNum)+parseInt(data.smAbnormalNum)){
			    	layer.msg("正常数量和异常数量的和不等于数量", {time: 2000});
			    	return false;
			    }
			    if(parseInt(data.smNum)!=parseInt(data.smExpireNum)+parseInt(data.smUnexpiredNum)){
			    	layer.msg("到期数量和未到期数量的和不等于数量", {time: 2000});
			    	return false;
			    }
			    $.ajax({
			        type : 'post',
			        url : '/option/asset/save',
			        dataType:'json',
			        data: JSON.stringify(data),
			        headers: {"Content-Type": "application/json;charset=utf-8"},
			        success : function(result) {
			            console.info(result);
			            $('#assetForm').data('bootstrapValidator').resetForm(true);
			            $('#assetModal').modal('hide');
			        }
			    })
			}
		};
		
		//删除
		function assetDeleteById(id) {
		    $.ajax({
		        type : 'post',
		        url : '/option/asset/del/'+id,
		        dataType:'json',
		        success : function(result) {
					$('#assetModal').modal('hide');
					queryTableData();
		        }
		    })
		};
		
	</script>
	<!-- Modal add start -->
	<form  id="assetForm" class="form-horizontal">
	<div class="modal fade" id="assetModal" tabindex="-1" role="dialog" aria-labelledby="assetModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="assetModalLabel">
                	新增安防物资
                </h4>
            </div>
            <div class="modal-body">
            	<div class="form-group" style="display:none;">
                    <label class="control-label col-xs-3">oid:</label>
                    <div class="col-xs-8">
                        <input type="text" name="oid" id="oid" value="" class="form-control">
                	</div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3">名称:</label>
                    <div class="col-xs-8">
                        <input type="text" name="smName"  placeholder="请输入名称" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3">数量:</label>
                    <div class="col-xs-8">
                        <input type="text" onkeyup="this.value=this.value.replace(/\D/g,'')" name="smNum"  placeholder="请输入数量(数字)" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3">正常数量:</label>
                    <div class="col-xs-8">
                        <input type="text" onkeyup="this.value=this.value.replace(/\D/g,'')" name="smNormalNum"  placeholder="请输入正常数量(数字)" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3">异常数量:</label>
                    <div class="col-xs-8">
                        <input type="text" onkeyup="this.value=this.value.replace(/\D/g,'')" name="smAbnormalNum"  placeholder="请输入异常数量(数字)" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3">到期数量:</label>
                    <div class="col-xs-8">
                        <input type="text" onkeyup="this.value=this.value.replace(/\D/g,'')" name="smExpireNum"  placeholder="请输入到期数量(数字)" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3">未到期数量:</label>
                    <div class="col-xs-8">
                        <input type="text" onkeyup="this.value=this.value.replace(/\D/g,'')" name="smUnexpiredNum"  placeholder="请输入未到期数量(数字)" class="form-control">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="closeButton" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="assetSaveFn();">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

</form>
<!---Model end -->

</body>
</html>